<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="app">
        {{message}}
        [[message]]
        <hr>
        <a v-bind:href="[[url]]">点击跳转</a>
        <hr>
        <a href="#" v-if="isLogin">个人中心</a>
        <a href="#" v-else>登录</a>
        <hr>
        <span v-if="seen">if</span>
        <span v-show="seen">show</span>
        <hr>
        <ul>
            <!-- v-for = "变量名 in 列表变量名" -->
            <li v-for="(shop,index) in shops">{{index}}:{{shop}}</li>

        </ul>
        <hr>
        <!-- v-for="(值,key) in 变量名" -->
        <li v-for="(value,name) in object">
            {{name}}：{{value}}
        </li>
        <hr>

        <div>
            <button v-on:click="count+=1">ADD 1</button>
            <span>this is count : {{count}}</span>
        </div>
        <div>
            <button v-on:click="add">ADD 1</button>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            // delimiters: ['[[', ']]'],
            data: {
                message: 'hello vue',
                url: 'http://www.baidu.com',
                isLogin: true,
                seen: false,
                shops: ['北京', '广州', '深圳', '珠海', '澳门'],
                object: {
                    name: 'lyuetw',
                    age: '23',
                    info: 'handsome'
                },
                count: 1
            },
            methods: {
                // 函数
                add : function(){
                    alert('点击了该按钮')
                }
            }
        })

    </script>
</body>

</html>